<template>
  <!--
      v-form 表单有个属性 valid：true-表示验证通过   false-表示验证失败
      并且还提供了两个方法:
          - reset：重置表单数据
          - validate：校验整个表单数据，前提是你写好了校验规则。返回Boolean表示校验成功或失败
  -->
  <v-form v-model="valid" ref="heima63"><!-- 添加ref属性就可以直接获取到表单对象,通过this.$refs.ref的值   来获取表单对象-->
    <v-text-field v-model="brand.name" label="请输入品牌名称" required :rules="nameRules"/>
    <v-text-field v-model="brand.letter" label="请输入品牌首字母" required :rules="letterRules"/>
    <!--类型的级联下拉框-->
    <!--required 属性表示此项是必须输入的 否则校验不通过-->
    <v-cascader
      url="/item/category/list"
      multiple
      required
      v-model="brand.categories"
      label="请选择商品分类"/>
    <!--图片上传组件-->
    <v-layout row>
      <v-flex xs3>
        <span style="font-size: 16px; color: #444">品牌Logo：</span>
      </v-flex>
      <v-flex>
        <v-upload
          v-model="brand.image"
          url="/upload/image"
          :multiple="false"
          :pic-width="250"
          :pic-height="90"/>
      </v-flex>
    </v-layout>

    <v-layout class="my-4" row>
      <v-spacer/>
      <v-btn @click="submit" color="primary">提交</v-btn>
      <v-btn @click="clear">重置</v-btn>
    </v-layout>
  </v-form>
</template>

<script>
  export default {
    name: "MyBrandForm",
    props: {//接收父组件传来的数据
      oldBrand: {
        type: Object,
        default: {}
      },
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        valid: false,//这里给false默认表单校验不通过,但是如果没有写表单校验就会变成true
        brand: {
          name: '',//用户输入的品牌名称
          letter: '',//用户输入的品牌首字母
          image: '',//用户上传的品牌logo图片
          categories: [],//品牌所属的商品分类数组,因为用户可能选取多个分类,所以是数组
        },
        nameRules: [//品牌名的效验规则
          v => !!v || "品牌名称不能为空",
          v => v.length > 1 || "品牌名称至少2位"
        ],
        letterRules: [//首字母的效验规则
          v => !!v || "首字母不能为空",
          v => /^[a-zA-Z]{1}$/.test(v) || "品牌字母只能是1个字母"
        ]
      }
    },
    methods: {
      submit() {//表单提交
        //首先校验表单
        if (this.$refs.heima63.validate()) {//表示校验通过
          //处理categories,因为它是个集合,而且集合里面是对象,所以无法直接当成参数传递
          let {categories, ...others} = this.brand;

          //迭代categories后取出id重新返回给数组
          //categories会从对象数组变成普通数组
          categories = categories.map(cg => cg.id);

          //然后取出数组中所有的id,并使用join方法把数组转为字符串
          //others本身没有cids属性,这里的意思是创建一个cids属性并被赋值
          others.cids = categories.join();
          this.$http({
            method: this.isEdit ? 'put' : 'post', // 动态判断是修改还是新增然后决定提交方法是post还是put
            url: '/item/brand',
            data: this.$qs.stringify(others)//QS工具的stringify,可以把Object转为QueryString,如果不转换就会报请求参数格式错误
          }).then(resp => {
            //提交成功
            this.$message.success("品牌" + (this.isEdit ? '修改' : '添加') + "成功!");
            //添加成功关闭对话框,调用父组件里面的closeWindow方法
            this.$emit("close");
          }).catch(resp=>{
            this.$message.error("品牌" + (this.isEdit ? '修改' : '添加') + "失败,请刷新后重试!");
          });
        } else {
          this.$message.error("表单数据有误,请查证后提交!")
        }


      },
      clear() {//表单重置
        //获取表单对象,然后调用reset方法进行重置
        this.$refs.heima63.reset();
        //categories不是form中默认属性,需要手动重置
        this.brand.categories = [];
      }
    },
    watch: {//TODO watch监控
      oldBrand: {// 监控oldBrand的变化
        handler(val) {
          if (val) {
            // 注意不要直接复制，否则这边的修改会影响到父组件的数据，copy属性即可
            this.brand = Object.deepCopy(val)
          } else {
            // 为空，初始化brand
            this.brand = {
              name: '',
              letter: '',
              image: '',
              categories: [],
            }
          }
        },
        deep: true
      }
    }
  }
</script>

<style scoped>

</style>
